<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
        }
        ul{
            list-style: none;
            position: relative;
        }
        ul li{
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
    <button>上一张</button>
    <button>下一张</button>
    <ul>
        <li style="display: list-item;"><img src="img/TB1.jpg"></li>
        <li><img src="img/TB2.jpg"></li>
        <li><img src="img/TB3.jpg"></li>
        <li><img src="img/TB4.jpg"></li>
        <li><img src="img/TB5.png"></li>
    </ul>
    <script src="jquery-1.12.2.min.js"></script>
    <script>
        $(function(){
            var aBtn = $(":button"), nowIndex = 0;
            aBtn.eq(0).on("click", function(){
                $("ul > li").fadeOut(1000).eq((--nowIndex + 5) % 5).fadeIn(1000);
            });
            aBtn.eq(1).on("click", function(){
                 $("ul > li").fadeOut(1000).eq(++nowIndex % 5).fadeIn(1000);
            });
        });
    </script>
</body>
</html>